import { PureComponent } from 'react';
import { TreeSelect } from 'antd';
const { TreeNode } = TreeSelect;

class SelectMenuTree extends PureComponent {
  state = {
    value: undefined,
    treeData: [],
   };

  constructor(props) {
	  super(props);
	  console.log(props);
		this.state.value = props.menuValues;
  }
  
	componentDidMount() {
			if( undefined == this.props.menu ){ return false;}
			const { menu:{list} } = this.props;
		  this.setState({treeData: list});
	
	}
 
  
  onChange = (value,label,extra) => {
  	
  	if(extra.triggerNode.props.dataRef.key != '000000000000') {
	  	const { selectedMenuTreeValue } = this.props;
	    selectedMenuTreeValue(extra);
	    this.setState({ value });
  	}
  	
  };
  
  onSelect = value => {
  	
  }

	renderTreeNodes = data => {
		if( undefined == data ){ return false;}
		return data.map(item => {
		      if (item.children) {
		        return (
		    	    <TreeNode title={item.title} key={item.key} dataRef={item}  value={item.title}>
			            {this.renderTreeNodes(item.children)}
			         </TreeNode>
		        );
		      }
		      return <TreeNode {...item} value={item.title} dataRef={item} title={item.title} key={item.key}/>;
	  });
	}

	
  render() {
    return (
      <TreeSelect
      	showSearch
        value={this.state.value}
        dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
        placeholder="请选择菜单"
        treeDefaultExpandAll
        onSelect={this.onSelect}
        onChange={this.onChange}
      >
       	{this.renderTreeNodes(this.state.treeData)}
      </TreeSelect>
    );
  }
}

export default SelectMenuTree;